<!DOCTYPE HTML>
<html>
<head>
<title>内容选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
	font-size: 14px;
    height: 53px;
    width: 47px;
	background: #CC66FF;
	border: #000 1px solid;
	font-family: Roman;
}
input{ margin: 5px 5px; }
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$(function() {
		/* ---------内容选择器--------- */
		//改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" <div>xxidxx</div>
		$("#b1").click(function(){
			$("div:contains('id')").css("background-color","#FF6347");		
		});

		//改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
		$("#b2").click(function(){
			$("div:empty").css("background-color"," #9ACD32");		
		});
		//改变包含div子元素的div元素的背景色为 #FF0033" id="b3"
		$("#b3").click(function(){
			$("div:has(div)").css("background-color"," #FF0033");		
		});
		//改变非空div元素的背景色为 #006400" id="b4"
		$("#b4").click(function(){
			$("div:parent").css("background-color","#006400");		
		});
		

		//====================================================

		/* ---------可见选择器练习--------- */
		//改变所有可见 div 元素背景色为 #F08080" id="b5"
			$("#b5").click(function(){
			$("div:visible").css("background-color","#F08080");		
		});
		//让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6"
		$("#b6").click(function(){
			$("div:hidden").show().css("background-color"," #FF69B4");		
		});
	});
</script>
</head>

<body>
	<input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" />
	<input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" />
	
	<input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" />

	<hr/>
	<hr/>

	<input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" />
	<input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" />

	<h1>天气冷了</h1>

	<div id="one">id为one</div>

	<div id="two">
		id为two
		<div class="mini"> class是 mini</div>
	</div>

	<div class="one" title="aa">
		class是 one
		<div class="mini"></div>
		<div class="mini"> class是 mini</div>
	</div>

	<br>
	<div id="mover"></div>
	<br>
	<div style="display:none">看不见我...,看不见我....</div>
</body>
</html>



